<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <title>登录失败</title>
    <link rel="icon" type="shortcut icon" href="/img/favicon.png">
    <style>
        body {
            background-image: url("/img/indexbg1.jpg");
            background-size: cover;
        }

        a:hover {
            color: mediumvioletred;
        }

        .weather {
            background-color: mediumvioletred;
            color:white;
        }

        td {
            font-size:22px;
        }

        .juxing {
            width: 80px;
            height: 30px;
            border: 2px solid rebeccapurple;
            border-radius: 5px ;
            background:green;
            border:0px;
        }
        .dayWeather {
            border-right:1px solid #FFF
        }
    </style>

    <!-- 前台基于百度地图绘制地图-->
<!--    <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=NUvQmHyvEMWTO534b5GcCGUM4eGuGXwT"></script>-->
    <!-- 浏览器为网速阻止脚本js的直接document.write，将api改为getscript-->
</head>
<body>
    <p id="ipMsg"></p>
    <a class="reLogin" href="/login.html">重新登录</a>
    <br><p id="position" >看看这几天的天气?</p>
    <div id="map" style="width: 800px;height: 800px;margin-top: 100px">

    </div>

    <div class="weather">
        <br>
        <h2 id="today" align="left"></h2>
        <table width="100%" height="450"  >
            <tr id="weatherArea">

            </tr>
        </table>
    </div>
    <script src="/js/JQuerym.js"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/getscript?v=3.0&ak=NUvQmHyvEMWTO534b5GcCGUM4eGuGXwT"></script>
    <script type="text/javascript">
        $(function() {
            //发起请求获取错误信息
            $.get("/sys/getErrorMessage",{},function(response) {
                if(response.code == 0) {
                    var error = response.data;
                    alert(error.message);
                }
            })

            //发起请求，后台根据ip分析出大概位置
            $.get("/sys/getRegion",{},function(response) {
                if(response.code == -1) {
                    $("#ipMsg").text(response.message);
                } else {
                    $("#ipMsg").text(response.data);
                }
            })
        })

        //根据现在的经纬度添加Map
        addMap = function(longitude,latitude) {
            //根据百度地图绘制位置
            //构建地图 在某个具体的div中
            map = new BMap.Map("map");
            //创建中心点
            var point = new BMap.Point(longitude,latitude);
            //地图初始化
            map.centerAndZoom(point,15);
            //鼠标滚轮缩放
            map.enableScrollWheelZoom(true);
            //平移缩放控件
            map.addControl(new BMap.NavigationControl());
            //缩略地图
            map.addControl(new BMap.OverviewMapControl());
            //比列尺
            map.addControl(new BMap.ScaleControl());
            //地图类型
            map.addControl(new BMap.MapTypeControl());
            //控件的位置
            // var options = {anchor:BMAP_ANCHAOR_BOTTOM_RIGHT};
            // map.addControl(new BMap.NavigationControl(options));

            //为我的位置创建标注
            var marker = new BMap.Marker(point);
            //将标注放入地图
            map.addOverlay(marker);

            var options = {
                width:250,
                height:100,
                title: '我的位置'
            }
            var content = "<div><font color = 'pink'>我的家在这里</font></div>"
            var infoWindow = new BMap.InfoWindow(content,options);
            //监听标注，点击后显示信息窗口
            marker.addEventListener('click',function() {
                //在标记点打开窗口，如果是中央map.getCenter()
                map.openInfoWindow(infoWindow,point);
            });
        }

        showLocation = function(position) {
            //成功的回调函数
            var longitude = position.coords.longitude;
            var latitude = position.coords.latitude;
            // alert(longitude + ":" + latitude);

            $.get("/sys/getAddress",{latitude:latitude,longitude:longitude},function (response) {
                if(response.code == 0) {
                    var address = JSON.parse(response.data);
                    $("#position").text(address.data.city);
                    //处理返回的JSON数据
                    var yesterday = address.data.yesterday;

                    var forecast = address.data.forecast;
                    //主体
                    var str = "<td align='center' valign='top'><div class='dayWeather'><img  width='100' height='100' src='images/ic_cloudy.png' alt=''><p><font size='21'>" + address.data.wendu;
                    str +=" ℃</font></p><p>" +  yesterday.low  + "~" + yesterday.high ;
                    str += "</p><p>" + yesterday.type;
                    str += "</p><p>" + yesterday.fx + yesterday.fl;
                    str += "</p><div class='juxing'>良</div></div></td>";
                    //预报
                    for(var i = 0; i < forecast.length; i++) {
                        var day = forecast[i];
                        str += "<td align='center' valign='top'><div class='dayWeather'><p>" + day.date;
                        str += "</p><img  width='60' height='60' src='images/ic_rainstorm.png' alt=''><p>" + day.low + "~" + day.high + "</p>"
                        str += "<p>" + day.type;
                        str += "</p><p>" + day.fengxiang + day.fengli;
                        str += "</p><div class=\"juxing\">良</div></div></td>";
                    }
                    $("#today").html("&nbsp;&nbsp;&nbsp;&nbsp;" + yesterday.date);
                    $("#weatherArea").append(str);
                }
            });
            //根据geolocation获得的经纬度绘制map
            addMap(longitude,latitude);
        }

        errorHandler = function(error) {
            if(error.code == 1) {
                alert("access denied");
            } else if(error.code == 2) {
                alert("position is not avaliable");
            }
        }

        //加载页面完毕之后才调用，不然识别不了
        $("#position").click(function () {
            //navigator 最新插件 geolocation是否可以使用，可以才自动定位
            if(navigator.geolocation) {
                var options = {timeout: "6000"};
                //使用插件获取位置
                navigator.geolocation.getCurrentPosition(showLocation,errorHandler,options);
            } else {
                aler("对不起，你的浏览器不支持geolocation插件")
            }
        });

    </script>


    <!-- 看板精灵-->
    <script src="https://l2dwidget.js.org/lib/L2Dwidget.min.js"></script>
    <script type="text/javascript">
        //角色数组
        var characters = ['chitose','Epsilon2.1','Gantzert_Felixander','haru01','haru02','haruto','hibiki','hijiki','izumi','koharu','miku','nico','ni-j','nipsilon','nito','shizuku','tororo','tsumiki','Unitychan','wanko','z16'];

        //随意选择其中一个
        var petName = characters[15];
        L2Dwidget.init({
            "model": {
                "jsonPath": "https://unpkg.com/live2d-widget-model-" + petName + "@1.0.5/assets/" + petName + ".model.json",
                "scale": 1
            },
            "display": {
                "position": "right",
                "width": 150,
                "height": 300,
                "hOffset": 0,
                "vOffset": -20
            },
            "mobile": {
                "show": true,
                "scale": 0.5
            },
            "react": {
                "opacityDefault": 0.8,
                "opacityOnHover": 1
            },
            "dialog": {
                "enable": true,
                "script": {
                    //每隔20s显示的句子
                    'every idle 20s': '$hitokoto$',
                    //悬浮在down类型标签显示的对话框
                    'hover .content': '星星在天上而你在我心里 (*/ω＼*),你知道什么是高并发和多线程吗',
                    'hover .reLogin': '登录出错了，请重新登录吧',
                    //触碰身体显示
                    'tap body': '哎呀！别碰我！',
                    //触碰脸显示
                    'tap face': '讨厌，快学习',
                }
            }
        });
    </script>
</body>
</html>